<template>
    <div class="RadarChart-container">
        <div :id="id" :style="{ height, width }"></div>
    </div>
</template>

<script setup name="RadarChart">
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();
const props = defineProps({
    id: {
        type: String,
        default: "radarChart",
    },
    width: {
        type: String,
        default: "500px",
        required: true,
    },
    height: {
        type: String,
        default: "500px",
        required: true,
    },
});
const options = {
    grid: {
        left: "2%",
        right: "2%",
        bottom: "10%",
        containLabel: true,
    },
    legend: {
        x: "center",
        y: "bottom",
        data: [],
        textStyle: {
            color: "#999",
        },
    },
    radar: {
        // shape: 'circle',
        radius: "80%",
        indicator: [
            { name: "家用电器" },
            { name: "服装箱包" },
            { name: "运动户外" },
            { name: "手机数码" },
            { name: "汽车用品" },
        ],
    },
    series: [
        {
            name: "Budget vs spending",
            type: "radar",
            itemStyle: {
                borderRadius: 6,
                // color: function (params: any) {
                //     //自定义颜色
                //     const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
                //     return colorList[params.dataIndex];
                // },
            },
            data: [
                {
                    value: [400, 400, 400, 400, 400],
                    name: "预定数量",
                },
            ],
        },
    ],
};

onMounted(() => {
    const chart = echarts.init(document.getElementById('radarChart'))
    chart.setOption(options);
    window.addEventListener("resize", () => {
        chart.resize();
    })
})
</script>

<style lang="less" scoped>
.RadarChart-container {
}
</style>
